<template>
	<view>
		<Navbar></Navbar>
		<view class="u-card-box u-p-l-20 u-p-r-30 u-m-20">
			<view class="u-flex u-row-between u-col-top u-font-34">
				<view class="u-flex-1 u-font-bold">{{ orderData.title }}</view>
				<view class="u-color-red u-font-bold">{{ [3,5,7,9].includes(orderData.result_type) ? '-' : '+'}}{{orderData.price}}元</view>
			</view>
			<view class="u-m-t-20 u-font-26 u-color-gray">{{ orderData.hd_time }}</view>
		</view>
		<view class="u-card-box u-m-20 u-m-t-30">
			<u-form label-position="top">
				<u-form-item>
					<view class="u-p-b-20 u-flex">
						<view class="form-name">抬头类型</view>
						<view class="u-flex-1 u-m-l-80 u-font-26 u-flex u-row-between">
							<view :class="item.value == typeData.checkValue ? 'check_type' :'nocheck_type'"
								v-for="item in typeData.list" :key="item.value" @click="onChangeType(item)">
								{{item.label}}</view>
						</view>
					</view>
				</u-form-item>
			</u-form>
			<!-- 个人 -->
			<u-form :model="personForm" ref="personForm" v-show="[1].includes(typeData.checkValue)">
				<u-form-item prop="gfmc">
					<view class="form-name">发票抬头</view>
					<view class="u-flex u-row-between u-bg-fff u-border-radius-20">
						<view class="u-flex-1">
							<u-input v-model="personForm.gfmc" :disabled="false" :custom-style="inputLeftStyle"
								placeholder="请输入发票抬头" :clearable="false" />
						</view>
						<u-button type="warning" shape="circle" :custom-style="customStyle"
							@click="onGainInvoiceTitle(1)">获取微信发票抬头</u-button>
					</view>
				</u-form-item>
				<u-form-item prop="id_card">
					<view class="u-flex">
						<view class="form-name">身份证号</view>
						<view class="u-flex-1 u-m-l-40">
							<u-input v-model="personForm.id_card" :clearable="false" :custom-style="inputStyle"
								placeholder="请填写身份证号" />
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="email">
					<view class="u-flex">
						<view class="form-name">收件人邮箱</view>
						<view class="u-flex-1 u-m-l-40">
							<u-input v-model="personForm.email" :clearable="false" :custom-style="inputStyle"
								placeholder="请填写收件人邮箱" />
						</view>
					</view>
				</u-form-item>
			</u-form>
			<!-- 单位 -->
			<u-form :model="companyForm" ref="companyForm" v-show="[2].includes(typeData.checkValue)">
				<u-form-item prop="gfmc">
					<view class="form-name">发票抬头</view>
					<view class="u-flex u-row-between u-bg-fff u-border-radius-20">
						<view class="u-flex-1">
							<u-input v-model="companyForm.gfmc" :disabled="false" :custom-style="inputLeftStyle"
								placeholder="请输入发票抬头" :clearable="false" />
						</view>
						<u-button type="warning" shape="circle" :custom-style="customStyle"
							@click="onGainInvoiceTitle(2)">获取微信发票抬头</u-button>
					</view>
				</u-form-item>
				<u-form-item>
					<view class="u-flex u-p-t-20 u-p-b-20">
						<view class="form-name">开票类型</view>
						<view class="u-flex-1 u-flex u-row-right u-m-l-40">
							<u-radio-group v-model="radioData.checkName" active-color="#FB6510" :size="30" @change="onRadioGroupChange">
								<u-radio v-for="item in radioData.list" :key="item.name" :label-size="26" :name="item.name">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="gfsh">
					<view class="u-flex">
						<view class="form-name">纳税人识别号</view>
						<view class="u-flex-1 u-m-l-40">
							<u-input v-model="companyForm.gfsh" :clearable="false" :custom-style="inputStyle"
								placeholder="请填写纳税人识别号" />
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="gfdz">
					<view class="u-flex u-p-t-20 u-p-b-20">
						<view :class="companyForm.invoice_type == '82' ? 'u-font-bold' : 'form-name'">单位地址</view>
						<view class="u-flex-1 u-m-l-40">
							<view class="u-text-right" :class="companyForm.gfdz ? '' : 'u-color-placeholder'"
								@click="onGetLocation">
								{{ companyForm.gfdz || '请填写单位地址 >'}}
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="sjhm">
					<view class="u-flex">
						<view :class="companyForm.invoice_type == '82' ? 'u-font-bold' : 'form-name'">收件人手机号</view>
						<view class="u-flex-1 u-m-l-40">
							<u-input v-model="companyForm.sjhm" :clearable="false" :custom-style="inputStyle"
								placeholder="请填写收件人手机号" />
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="email">
					<view class="u-flex">
						<view class="form-name">收件人邮箱</view>
						<view class="u-flex-1 u-m-l-40">
							<u-input v-model="companyForm.email" :clearable="false" :custom-style="inputStyle"
								placeholder="请填写收件人邮箱" />
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>

		<view style="height: 200rpx;"></view>

		<Bottom :isTwice="true" :rightText="'提交发票'" @confirm="onApplyOrder"></Bottom>

		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" :maskAble="false" @confirm="modalConfirm" @cancel="modalConfirm"></Modal>
	</view>
</template>

<script>
	import {
		debounce
	} from "@/utils/index.js"
	import {
		getPhone,
		userApplyOrder,
		userApplyInvoice
	} from "@/network/api.js"
	import Navbar from "@/components/Navbar.vue"
	import Bottom from "@/components/Bottom.vue"
	import Modal from '@/components/Modal.vue'
	export default {
		components: {
			Navbar,
			Bottom,
			Modal
		},
		data() {
			return {
				orderData: {},
				personForm: {
					gfmc: '',
					id_card: '',
					email: '',
					invoice_type: '82',
					hsbz: 1
				},
				companyForm: {
					gfmc: '', // 抬头
					gfsh: '', // 税号
					email: '', // 邮箱
					invoice_type: '82', // 81 专票 82 普票 
					gfdz: '', // 地址
					sjhm: '', // 手机号码
					hsbz: 1
				},
				personRules: {
					gfmc: [{
						required: true,
						message: "请输入发票抬头"
					}],
					id_card: [{
						required: true,
						message: "请输入身份证号"
					}],
					email: [{
						required: true,
						message: "请输入正确邮箱格式",
						pattern: /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
					}]
				},
				companyRules:{
					gfmc: [{
						required: true,
						message: "请输入发票抬头"
					}],
					gfsh: [{
						required: true,
						message: "请输入纳税人识别号"
					}],
					email: [{
						required: true,
						message: "请输入正确邮箱格式",
						pattern: /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
					}],
					sjhm: [{
						required: false,
						message: "请输入收件人手机号"
					}],
					gfdz: [{
						required: false,
						message: "请输入单位地址"
					}]
				},
				/* 抬头类型 */
				typeData: {
					checkValue: 2,
					list: [{
						label: '个人',
						value: 1
					}, {
						label: '单位',
						value: 2
					}]
				},
				/* 发票类型 */
				radioData: {
					checkName: '普票',
					list: [{
							name: '普票'
						},
						{
							name: '专票'
						}
					]
				},
				inputStyle: {
					padding: "18rpx 20rpx 20rpx 0",
					background: "#fff",
					borderRadius: "20rpx",
					textAlign: "end"
				},
				inputLeftStyle: {
					padding: "18rpx 20rpx 20rpx 0",
					background: "#fff",
					borderRadius: "20rpx",
				},
				customStyle: {
					fontSize: "24rpx",
					height: "70rpx",
					lineHeight: "70rpx",
					background: '#B3723E'
				},
				modal: {
					show: false,
					confirm: '申请',
					cancel: '取消',
					showCancel: true,
					content: ''
				}
			}
		},
		onLoad(options) {
			this.orderData = JSON.parse(options.data)
		},
		onReady() {
			this.$refs.companyForm.setRules(this.companyRules)
			this.$refs.personForm.setRules(this.personRules)
		},
		methods: {
			onChangeType(val) {
				this.typeData.checkValue = val.value
				/* switch (val.value) {
					case 1:
						this.$refs.personForm.resetFields()
						break
					case 2:
						this.$refs.companyForm.resetFields()
						break
				} */
			},
			onGainInvoiceTitle(val) {
				const _this = this
				wx.chooseInvoiceTitle({
					success(res) {
						switch(val){
							case 1:
							    _this.personForm.gfmc = res.title
								break;
							case 2:
							    _this.companyForm.gfmc = res.title
								_this.companyForm.gfsh =res.taxNumber
								break;
						}
					}
				})
			},
			onGetPhoneNum(e) {
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					this.$u.toast("拒绝手机号登录");
					return;
				}
				getPhone({
					code: e.detail.code
				}).then(res => {
					this.form.mobile = res.data.phone_info.phoneNumber
				})
			},
			onRadioGroupChange(val) {
				switch (val) {
					case '普票':
						this.radioData.checkName = val
						this.companyForm.invoice_type = '82'
						this.companyRules.sjhm[0].required = false
						this.companyRules.gfdz[0].required = false
						break;
					case '专票':
						this.radioData.checkName = val
						this.companyForm.invoice_type = '81'
						this.companyRules.sjhm[0].required = true
						this.companyRules.gfdz[0].required = true
						break;
				}
			},
			onGetLocation() {
				const _this = this
				uni.chooseLocation({
					success: function(res) {
						_this.companyForm.gfdz = res.name
					}
				})
			},
			onApplyOrder() {
				if(this.typeData.checkValue == 1){
					this.$refs.personForm.validate(valid => {
						if (valid) {
							const params = {
								user_id: uni.getStorageSync("user_id"),
								order_id: this.orderData.id,
								type: this.orderData.result_type,
								up_type: this.typeData.checkValue,
								...this.personForm
							}
							userApplyInvoice(params).then(res=>{
								this.modal.content = res.msg
								this.modal.showCancel = false
								this.modal.confirm = '确定'
								this.modal.show = true
							})
						}
					})
				}
				
				if(this.typeData.checkValue == 2){
					this.$refs.companyForm.validate(valid => {
						if (valid) {
							const params = {
								user_id: uni.getStorageSync("user_id"),
								order_id: this.orderData.id,
								type: this.orderData.result_type,
								up_type: this.typeData.checkValue,
								yxdz: this.companyForm.email,
								gflxdh: this.companyForm.sjhm,
								...this.companyForm
							}
							userApplyInvoice(params).then(res=>{
								this.modal.content = res.msg
								this.modal.showCancel = false
								this.modal.confirm = '确定'
								this.modal.show = true
							})
						}
					})
				}
			},
			modalConfirm() {
				uni.navigateBack({
					delta: 1,
					success() {
						uni.$emit('update', {
							msg: '页面更新'
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.form-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #2A324D;
	}

	.form-name::after {
		content: "*";
		color: #F8494D;
		margin-left: 5rpx;
	}

	.form-label {
		font-size: 28rpx;
		font-weight: bold;
		color: #2A324D;
	}

	.disable-box {
		background-color: #EFEFEF;
		padding: 18rpx 30rpx;
		border-radius: 20rpx;
	}

	::v-deep .u-form-item {
		padding: 0 !important;
	}

	#mobile_btn {
		padding: 0;
		margin: 0;
		color: #3070F6;
		background: transparent;
		font-size: 26rpx;
	}

	#mobile_btn::after {
		border: none !important;
		height: 100%;
	}

	.radio_box {
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.nocheck_type {
		color: #B3723E;
		border: 1rpx solid #B3723E;
		background: #fff;
		border-radius: 50rpx;
		padding: 0rpx 80rpx;
	}

	.check_type {
		color: #fff;
		border: 1rpx solid #B3723E;
		background: #B3723E;
		border-radius: 50rpx;
		padding: 0rpx 80rpx;
	}
</style>